<!-- 模板 -->
<template>
  <div class="">
    <img src="../assets/logo.png">
    <h1>{{message}}</h1>
    <button @click="openCalendarSelector">打开</button>
    <!-- calendar-selector：日历选择器 -->
    <!-- calendarSelector: 打开日历选择器（布尔值） -->
    <!-- csOption:传入参数(Object):timeStart：最早开始时间，timeEnd：最晚开始时间，timeLength：时间长度 (时间格式：yyyy-mm-dd )-->
    <!-- getCalendarSelectorResult：返回值（Date对象） -->
    <calendar-selector 
    :isShow="cs_show" 
    :csOption="csOption"
    @sendCalendarResult="getCalendarSelectorResult"
    @selectError="select_error"
    @startChange="startChange"
    @endChange="endChange">
       
     </calendar-selector>
    <!-- calendar-selector：日历选择器 -->
  </div>
</template>

<!-- js -->
<script>
import CalendarSelector from '@/components/calendarSelector'

export default {
  name: 'test1',
  data () {
    return {
      message: 'calendarSelector',
      cs_show: false,
      csOption: {timeStart:'2018-01-20', timeEnd:'2018-02-24', timeLength:6}
    }
  },
  components: {
    CalendarSelector
  },
  methods: {
    openCalendarSelector: function () {
      this.cs_show = true
    },
    startChange: function (data) {
      console.log(data)
    },
    endChange: function (data) {
      console.log(data)
    },
    getCalendarSelectorResult: function (data) {
      if(data.code === 1){
        // success
        console.log(data)
      }else{
        // error
        console.log(data)
      }
      this.cs_show = false
    },
    select_error: function (data) {
      console.log(data)
    }
  }
}
</script>

<!-- style -->
<style scoped>
/*style*/
</style>
